<template>
  <div>
    <div class="login" v-if="!isLoging">
      <div>
        <el-form :model="formLogin" status-icon :rules="rules" ref="formLogin">
          <el-form-item label="账号" prop="loginUser">
            <el-input type="text" v-model="formLogin.loginUser" placeholder="请输入账号" required></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="loginPass">
            <el-input type="password" v-model="formLogin.loginPass" placeholder="请输入密码" required></el-input>
          </el-form-item>
          <el-form-item>
            <span @click="regVisible = true">注册</span>
            <span class="forgetPass">忘记密码</span>
          </el-form-item>
        </el-form>
        <el-dialog width="30%" title="注册" :visible.sync="regVisible" append-to-body center>
          <el-form :model="formReg" status-icon :rules="rules" ref="formReg">
            <el-form-item label="账号" prop="user">
              <el-input type="text" v-model="formReg.user" placeholder="请输入账号" required></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="formReg.pass" placeholder="请输入密码" required></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="formReg.checkPass" placeholder="请再次输入密码" required></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button plain @click="regSubmit">注册</el-button>
            <el-button plain @click="regVisible = false">取 消</el-button>
          </div>
        </el-dialog>
        <center>
          <el-button plain @click="loginSubmit">登录</el-button>
          <el-button plain @click="returnPage()">取 消</el-button>
        </center>
      </div>
    </div>

    <h1 v-if="isLoging">MyMusic</h1>
  </div>
</template>

<script>
import { login, register } from "../../network/user";

export default {
  name: "MyMusic",
  data() {
    var validateUser = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8|9][0-9]{9}$/;
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
        // 所以我就在前面加了一个+实现隐式转换
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式/长度不正确'))
          }
        }
      }, 100)
    }
    var validatePass = (rule, value, callback) => {
      const passReg = /^[a-zA-Z]\w{8,18}$/;
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (!passReg.test(value)) {
        callback();
      } else {
        if (this.formReg.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validateCheckPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.formReg.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      loginVisible: false,
      regVisible: false,
      isLoging: false,
      formLogin: {
        loginUser: "",
        loginPass: "",
      },
      formReg: {
        user: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        user: [
          { validator: validateUser, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validateCheckPass, trigger: 'blur' }
        ],
      },
      loginTime: "",
      isLogin: {},
    }
  },
  created() {
    this.verLogin();
  },
  methods: {
    verLogin() {
      if (localStorage.getItem("loginTime") == null) {
        this.isLoging = false
      } else {
        this.isLoging = true
      }
    },
    loginSubmit() {
      login(this.formLogin.loginUser, this.formLogin.loginPass).then((res) => {
        console.log(res.data);
        if (res.data == "500") {
          alert("账号或密码不正确，请重新输入！");
        } else {
          this.loginTime = res.data.loginTime;
          localStorage.setItem("loginTime", this.loginTime);
          this.isLogin.btn = false;
          this.isLogin.img = true;
          localStorage.setItem("username", this.formLogin.loginUser);
          //刷新页面 让登陆头像显示
          location.reload();
        }
      });
      this.loginVisible = false;
    },
    regSubmit() {
      if (this.formReg.pass === this.formReg.checkPass) {
        register(this.formReg.user, this.formReg.pass).then((res) => {
          console.log(res.data);
          this.regVisible = false;
        });
      } else {
        alert("两次密码不一样，请重新输入");
      }
    },
    returnPage() {
      this.$router.push("/MusicHall");
    },
  }
}
</script>

<style scoped>
.login {
  width: 25%;
  height: 25%;
  padding: 25px;
  margin: 50px auto;
}
.forgetPass {
  text-align: right;
  float: right;
}
</style>